<template>
  <el-drawer
    v-model="drawer"
    :with-header="false"
    size="40%"
  >
    <el-main
      v-loading="loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      element-loading-text="数据加载中..."
      style="height:100%;"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="选择接口绑定" name="group">
          <el-button-group>
            <el-button  icon="el-icon-check" @click="selectAll">全选</el-button>

            <el-button  icon="el-icon-minus" @click="clear">清除</el-button>

          </el-button-group>

          <el-button-group>
            <el-button type="primary" @click="save">保存绑定</el-button>

            <el-button @click="close">关闭</el-button>

          </el-button-group>
          <div v-for="(group, index) in apiGroupData" :key="index">
            <h3 style="margin-top: 10px;">
              {{ group.name }}
              <el-checkbox
                v-model="checkAll[index]"
                @change="handleCheckAllChange(index, group.apis)"
                style="margin-left: 10px;">全选</el-checkbox>
            </h3> 
            <el-checkbox-group
              v-model="apiGroupCheckList[index]"
              class="ma-tree-border padding"
            >
              <el-checkbox
                v-for="(item, key) in group.apis"
                :key="key" :label="item.id"
                @change="handleCheckedChange(index, item, group.apis.length)"
              >
                {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="选择接口绑定" name="api">

        </el-tab-pane> -->
      </el-tabs>
    </el-main>
  </el-drawer>
</template>

<script>
import { union, xor } from 'lodash'
export default {
  emits: ['success'],
  data() {
    return {
      appId: '',
      drawer: false,
      loading: true,
      activeName: 'group',
      apiGroupData: [],
      apiGroupCheckList: [],
      checkAll:[],

      checkList: [],
      queryParams: {
        getApiList: true
      }
    };
  },
  methods: {
    async open(id) {
      this.appId = id
      this.drawer = true
      this.loading = true
      this.clear()
      await this.getApiGroupData()
      await this.setData()
    },

    setData() {
      this.$API.app.getBindApiList({ id: this.appId }).then(res => {
        // 设置数据
        if (res.success && res.data.length > 0) {
          res.data.map(id => {
            this.apiGroupData.map((rows, key) => {
              rows.apis.map(async item => {
                if (item.id == id) {
                  this.apiGroupCheckList[key].push(item.id)
                  await this.handleCheckedChange(key, item, rows.apis.length)
                }
              })
            })
          })
        }
      })
    },

    // 请求数据
    getApiGroupData() {
      this.$API.apiGroup.getSelectList(this.queryParams).then(res => {
        this.apiGroupData = res.data
        this.apiGroupData.forEach( _ => {
          this.apiGroupCheckList.push([])
          this.checkAll.push(false)
        })
        this.loading = false
      })
    },

    // 分组全选
    handleCheckAllChange(index, rows) {
      if (! this.checkAll[index]) {
        let list = Object.assign({}, this.checkList)
        this.apiGroupCheckList[index] = []
        rows.map(row => {
          this.checkList = xor(this.checkList, [row.id])
        })
        this.checkList = union(this.checkList, list)
      } else {
        rows.map(row => {
          this.apiGroupCheckList[index].push(row.id)
          this.checkList = union(this.checkList, [row.id])
        })
      }
    },

    handleCheckedChange(index, item, len) {
      this.checkList = xor(this.checkList, [item.id])
      this.apiGroupCheckList[index] = xor(this.apiGroupCheckList[index], item.id)
      this.checkAll[index] = this.apiGroupCheckList[index].length === len
    },

    // 全选当前页
    selectAll () {
      this.apiGroupData.map((row, key) => {
        this.checkAll[key] = true
        this.handleCheckAllChange(key, row.apis)
        row.apis.map(item => {
          this.checkList = union(this.checkList, [item.id])
        })
      })
    },

    // 清除
    clear () {
      this.apiGroupData.map((row, key) => {
        this.apiGroupCheckList[key] = []
        this.checkAll[key] = false
        this.checkList = []
      })
    },

    // 保存
    save() {
      this.$API.app.bind(this.appId, { apiIds: this.checkList }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.close()
        }
      })
    },

    // 关闭
    close() {
      this.apiGroupData = []
      this.apiGroupCheckList = []
      this.checkAll = []
      this.checkList = []
      this.drawer = false
    }
  }
};
</script>

<style scoped>
.padding {
  padding: 5px 10px;
}
</style>
